import './GraphicProgressA01.scss'
import { v4 } from 'uuid'
import { useState } from 'react'
import { useMount, useRequest } from 'ahooks'
import { MinusCircleOutlined } from '@ant-design/icons'
import { Input, ColorPicker, InputNumber, Button, Popconfirm, notification } from 'antd'

import { Http } from '../../../Api'

const { TextArea } = Input

export const GraphicProgressA01 = () => {
    const [api, contextHolder] = notification.useNotification()
    const json = [{ uuid: v4(), title: '标题', color: '#F5DD5D ', content: '内容', sortId: 1 }]
    const [Data, setData] = useState()
    const { runAsync: getData } = useRequest(Http, {
        manual: true,
        onSuccess: res => {
            if (res) {
                setData(res)
            } else {
                const data = JSON.stringify(JSON.stringify(json))
                setData(json)
                posData({ url: 'posSaveJsonInfoByUuid', data, path: ['GraphicProgressA01'] })
            }
        },
    })

    const { runAsync: posData } = useRequest(Http, {
        manual: true,
        onSuccess: () => {
            api.success({ key: 'success', message: '数据保存成功!' })
            getData({ url: 'getJsonInfoByUuid', data: { uuid: 'GraphicProgressA01' } })
        },
    })

    useMount(() => {
        getData({ url: 'getJsonInfoByUuid', data: { uuid: 'GraphicProgressA01' } })
    })

    const onAdded = () => {
        setData([...Data, ...json])
    }

    const onDelete = uuid => {
        const delArr = Data.filter(item => item.uuid !== uuid)
        setData(delArr)
    }

    const onSubmit = () => {
        Data.sort((a, b) => a.sortId - b.sortId)
        const data = JSON.stringify(JSON.stringify(Data))
        posData({ url: 'posSaveJsonInfoByUuid', data, path: ['GraphicProgressA01'] })
    }

    if (Data) {
        return (
            <div className="GraphicProgressA01">
                {contextHolder}
                {Data &&
                    Data.map(({ uuid, title, color, content }, index) => {
                        const data = Data.find(v => v.uuid === uuid)
                        return (
                            <div key={uuid}>
                                <div className="LabelA01">
                                    <div className="Label">
                                        <div>标题 : </div>
                                        <Input
                                            defaultValue={title}
                                            onChange={e => {
                                                data.title = e.target.value
                                                setData([...Data])
                                            }}
                                        />
                                    </div>
                                    <div className="Label">
                                        <div>颜色 : </div>
                                        <ColorPicker
                                            defaultValue={color}
                                            onChangeComplete={e => {
                                                data.color = e.toHexString()
                                                setData([...Data])
                                            }}
                                        />
                                    </div>
                                    <div className="Label">
                                        <div>排序 : </div>
                                        <InputNumber
                                            defaultValue={index + 1}
                                            onChange={e => {
                                                data.sortId = e
                                                setData([...Data])
                                            }}
                                        />
                                    </div>
                                    <div>
                                        <Popconfirm
                                            title="是否删除该行数据?"
                                            description="删除后数据不能恢复,请谨慎选择!"
                                            okText="删除"
                                            cancelText="取消"
                                            onConfirm={() => onDelete(uuid)}
                                        >
                                            <MinusCircleOutlined />
                                        </Popconfirm>
                                    </div>
                                </div>
                                <div className="Label">
                                    <div>内容 : </div>
                                    <TextArea
                                        rows={4}
                                        defaultValue={content}
                                        onChange={e => {
                                            data.content = e.target.value
                                            setData([...Data])
                                        }}
                                    />
                                </div>
                            </div>
                        )
                    })}
                <div className="Button">
                    <Button block type="dashed" size="large" onClick={onAdded}>
                        添加一行数据
                    </Button>
                    <Button block type="primary" size="large" onClick={onSubmit}>
                        保存数据
                    </Button>
                </div>
            </div>
        )
    }
}
